
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#accordion").accordion({ header: "h3" });
	
	$('#dialog').dialog({
		autoOpen: false,
		width: 600,
		buttons: {
			"Ok": function() { 
				$(this).dialog("close"); 
			}, 
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
	
	// Dialog Link
	$('#dialog_link').click(function(){
		$('#dialog').dialog('open');
		return false;
	});
	// Tabs
	$('#tabs').tabs();})
</script>

<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>

<title>MyTest</title>
</head>
<body>
<div id="tabs">
			<ul>
				<li><a href="#tabs-1">肉</a></li>
				<li><a href="#tabs-2">菜</a></li>
				<li><a href="#tabs-3">海鲜</a></li>
			</ul>
			<div id="tabs-1">
			<div id="accordion">
			<div>
				<h3><a href="#">猪肉</a></h3>
				<div>
					<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>红烧肉</a></p>
					<div id="dialog" title="红烧肉">
						<p>红烧肉的做法</p>
					</div>
				</div>
			</div>
			<div>
				<h3><a href="#">牛肉</a></h3>
				<div>
					<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>五香牛肉</a></p>
					<div id="dialog" title="五香牛肉">
						<p>五香牛肉的做法</p>
					</div>
				</div>
			</div>
			<div>
				<h3><a href="#">鸡肉</a></h3>
				<div>
					<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>烤鸡翅</a></p>
					<div id="dialog" title="烤鸡翅">
						<p>烤鸡翅的做法</p>
					</div>
				</div>
			</div>
		</div>
			</div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>

<form action="showTopType.do" method="post">


<button type="submit">ShowItem</button>
</form>
</body>
</html>